<template>
  <div class="table-config">
    <!-- 布局配置弹窗 -->
    <el-dialog
      :model-value="visible"
      title="表格布局配置"
      width="500px"
      @open="dialogOpen"
      @close="handleClose"
      draggable
    >
      <div class="layout-setting">
        <el-text type="info" size="small">拖动列名可调整显示顺序</el-text>

        <h3>表格设置</h3>
        <el-checkbox v-model="localConfig.showBorder" label="边框"
                     class="checkbox-item check-select"/>
        <div>
          <el-radio-group class="checkbox-item" v-model="localConfig.align">
            <el-radio value="left">靠左</el-radio>
            <el-radio value="center">居中</el-radio>
            <el-radio value="right">靠右</el-radio>
          </el-radio-group>
        </div>
        <h3>列显示设置</h3>
        <ElCheckboxGroup
          v-model="checkedColumns">
          <!-- 使用正确的VueDraggable方式，绑定list属性 -->
          <VueDraggable
            :list="localConfig.columns"
            :animation="300"
            class="checkbox-list"
            drag-class="drag-class"
            ghost-class="ghost"
            item-key="prop"
          >
            <template #item="{ element }" >
              <div class="checkbox-item check-select"  v-if="element.prop">
                <el-tooltip content="拖动排序"/>
                <el-checkbox
                  :label="element.prop"
                  :disabled="checkedColumns.length <= 1 && checkedColumns.includes(element.prop)"
                >
                  {{ element.label }}
                </el-checkbox>
              </div>
            </template>
          </VueDraggable>
        </ElCheckboxGroup>


      </div>
      <template #footer>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="saveLayoutSetting">保存设置</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import VueDraggable from 'vuedraggable'
import {PropType, ref} from 'vue'
import {TableConfigType} from "@/components/TablePro/data";

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => false
  },
  config: {
    type: Object as PropType<TableConfigType>,
    required: true
  },
  storageKey: {
    type: String,
    required: true
  }
})

const emits = defineEmits(['update:visible', 'update:config'])


// 选中的列（控制显示/隐藏）
const checkedColumns = ref<(string | undefined)[]>([])


const localConfig = ref<TableConfigType>(props.config)

/**
 * 弹窗打开时初始化
 */
const dialogOpen = () => {

  localConfig.value = {
    ...props.config,
    columns: JSON.parse(JSON.stringify(props.config.columns)),
    visibleColumns: JSON.parse(JSON.stringify(props.config.visibleColumns))
  }

  // 初始化选中的列
  checkedColumns.value = localConfig.value?.visibleColumns
      ?.map((item) => item.prop)
    ?? []

}

/**
 * 保存布局设置
 */
const saveLayoutSetting = () => {
  // 过滤出选中的列，保持拖拽后的顺序
  localConfig.value.visibleColumns = localConfig.value.columns.filter((col) =>
    checkedColumns.value.includes(col.prop)
  )
  // 通知父组件更新
  emits('update:config', localConfig.value)
  // 关闭弹窗
  emits('update:visible', false)
  // 保存到本地存储
  localStorage.setItem(`TablePro.Layouts.${props.storageKey}`, JSON.stringify(localConfig.value))
}

/**
 * 取消操作
 */
const handleCancel = () => {
  handleClose();
}
/**
 * 弹窗关闭时处理
 */
const handleClose = () => {
  emits('update:visible', false)
}

</script>
<style scoped lang="scss">
.layout-setting {
  padding: 10px 0;

  h3 {
    margin: 16px 0;
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }

  // 拖拽列表容器
  .checkbox-list {
    display: flex;
    gap: 12px;
    overflow-y: auto;
    padding-right: 8px;
    flex-wrap: wrap;
  }

  // 拖拽项样式
  .checkbox-item {
    padding: 6px 10px;

    height: 50px;


  }

  .check-select {
    border-radius: 4px;
    transition: background-color 0.2s;
    gap: 8px;

    &:hover {
      background-color: #ecf5ff;
    }
  }

  // 拖拽时的占位样式
  .ghost {
    border: 1px dashed #1890ff;
    opacity: 0.7;
  }

}
</style>
